<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="css/table.css" rel="stylesheet" type="text/css" />
<link href="css/excite-bike/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/widgets.js"></script>
<script type="text/javascript">


function chkALL(a) {
	if ($("#"+a+"CheckALL").is(":checked")) {
		$("."+a).each(function() {
			$(this).prop("checked",true);
		}); 
	} else {
		$("."+a).each(function() {
			$(this).prop("checked",false);
		});
	}		
}

function Click_PickUser(roleID) {
	var tmpSelectedRole = [];
	$("." + roleID).each(function(items) {
		var i = $(this).attr("id");
		var v = $(this).attr("val");
		var item = {"id":i, "val" : v}
		tmpSelectedRole.push(item);
	});
	
	$("#sub_getUserType")[0].value = "ALL";

	$.post("GetUsers",$("#q_form").serializeArray(),function(queryResult) {
		$("tbody[id=tBodyTPOwner] tr").remove(); //所有計畫負責人名單的 Table
		$.each(queryResult,function(i, res) {
			
			var bgcolor = getbgColor((i+1));
			var userID = res.userID;
			var nickName = res.nickName; //將暱稱寫入FirstName
			var ckd = ""; //用來決定是否要勾選

			/** 比對陣列中的元素，一樣的groupId就要勾起來 **/
			if (tmpSelectedRole.length > 0) {
				for (m = 0; m < tmpSelectedRole.length; m++) {
					if (tmpSelectedRole[m].id == userID) {	ckd = "checked=\"checked\""; }
				}
			}

			$("#tBodyTPOwner").append("<tr bgcolor="+bgcolor+"><td><input type=\"checkbox\" class=\"tpo\" value=\""+userID+"\" nickName=\""+nickName+"\"" + ckd +"/></td><td>"
									+ (i + 1)
									+ "</td><td>"
									+ nickName
									+ " (" + userID 
									+ ")</td></tr>");
			});

			$("#dialog-Group").dialog({
				resizable : true,
				width : 410,
				height : 500,
				modal : true,
				buttons : {
				"關閉" : function() {
					$("#" + roleID + " li").remove();
					var userList = "";
					$(".tpo").each(function() {													
						if ( $(this).is(":checked")) {
							var tpOwnerID = $(this).attr("value");
							userList += tpOwnerID;
							userList += ",";
							var tpn = $(this).attr("nickName"); //人員的暱稱(顯示給看的名稱)
							$("#"+ roleID).append("<li class=\""+roleID+"\" val=\""+tpn+"\" id="+tpOwnerID+">"
													+ tpn+" ("+tpOwnerID+")"+ "</li>");
						}
					});

					$("#sub_userList")[0].value = userList;
					$("#sub_userType")[0].value = roleID;

					$.post("SaveRoleUserMapping",$("#q_form").serializeArray(),function(queryResult) {
						alert(queryResult);
					},"TEXT");

					$(this).dialog("close");
				}
				}
			});
			$("#dialog-Group").css("visibility", "visible");
		},"JSON");
	}

	$(document).ready(function() {

		$("#loginUser")[0].value = $.cookie("userID");
		$("#dialog-Group").css("visibility", "hidden");

		$.post("RoleList",$("#q_form").serializeArray(),function(queryResult) {
			$.each(queryResult,function(i, res) {
				roleID = res.roleID;
				roleName = res.roleName;

				$("#"+ roleID+ " li").remove();

				$("#roleBody").append("<tr><td><button type=\"button\" onClick=\"Click_PickUser('"
					+ roleID
					+ "')\">選擇</button></td><th>"
					+ roleName
					+ "</th></tr><tr><td colspan=\"2\"><ul id=\""+roleID+"\"></ul></td></tr>");

				$.each(res.users,function(m,userList) {
					$("#"+ roleID).append("<li class=\""+roleID+"\" id=\""+userList.userID+"\" val=\""+userList.nickName+"\">"
											+ userList.nickName+" ("+userList.userID+")"
											+ "</li>");
				});
			});
		}, "JSON");
	});
</script>
</head>
<body>

<h1>設定人員角色</h1>

<hr>

<table>
<tbody id="roleBody"></tbody>

</table>

<div id="dialog-Group" title="請勾選人員">
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="tpoCheckALL" onClick="chkALL('tpo')" /></th>
					<th>#</th>
					<th>人員列表</th>
				</tr>
			</thead>
			
			<tbody id="tBodyTPOwner">
			</tbody>
		</table>
	</div>

	<form id="q_form">
		<input type="hidden" id="loginUser" name="loginUser" />					<!-- 目前登入的使用者 -->
		<input type="hidden" id="sub_userList" name="userList" />
		<input type="hidden" id="sub_userType" name="userType" />
		<input type="hidden" id="sub_getUserType" name="getUserType" />
	</form>
</body>
</html>